<!-- 文章分类 -->
<template>
    <div class="container">
        <!-- 分类 -->
        <div 
        v-for="item in sortList"
        class="sort" 
        :key="item.id" 
        ref="containersRef">
            <!-- 顶部 -->
            <el-row type="flex" justify="space-between" class="sort-top" >
                <el-row class="sotr-title flx-align-center">
                    <svgIcon iconName="icon-fenlei"/>
                    <span>{{ item.sortName }}</span>
                </el-row>
                <!-- <el-row class="sort-more flx-align-center">
                    <svgIcon iconName="icon-gengduo2"/>
                    <span>更多</span>
                </el-row> -->
            </el-row>
            <!-- 内容 -->
            <el-row class="main">
                <el-col
                :sm="24" :md="8" :lg="8"
                v-for="articleItem in item.articles"
                :key="articleItem.id"
                class="main-card">
                    <ArticleCard :cardInfo="articleItem"></ArticleCard>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup>
import ArticleCard from '../components/article-card/article-card.vue';
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { sortApi } from '@/api/article/sort-api';
import { nextTick } from 'vue';
import { articleApi } from '@/api/article/article-api';
import { ARTICLE_STATUS } from '@/constants/system/article';

// ========================= 组件挂载前 =========================
onBeforeMount(() => {
    getSortData();
})

let sortList = ref([]);
async function getSortData() {
    let params = {
        sortName: '',
        state: true
    }
    const res = await sortApi.list({params});
    sortList.value = res.data.data;
    nextTick(() => {
        containersRef.value.forEach((container) => {
            observer.observe(container);
        })
    })
};

// ========================= 滚动加载 =========================
const containersRef = ref([]);
const observer = new IntersectionObserver(
    (entries, observer) => {
        entries.forEach(async entry => {
            if (entry.isIntersecting) {
                // 当容器进入视口时，entry.bottom 会给出容器底部距离视口底部的距离
                const itemIndex = containersRef.value.indexOf(entry.target);
                const sortItem = sortList.value[itemIndex];
                let conditions = {
                    params: {
                        status: ARTICLE_STATUS.RELEASE_STATE.value,
                        articleTitle:'',
                        sortId:sortItem.id
                    },
                    // limit:6,
                    // offset:1
                };
                const res = await articleApi.list(conditions);
                sortList.value[itemIndex].articles = res.data.data;
                observer.unobserve(entry.target);
            }
        });
    },
    { threshold: 0.1 } // 设置阈值为 0，以便在容器进入视口时立即触发回调
);

// ========================= 实例加载后 =========================
onMounted(() => {
    containersRef.value.forEach((container) => {
        observer.observe(container);
    })
});

// ========================= 实例销毁前 =========================
onBeforeUnmount(() => {
    observer.disconnect();
});
</script>

<style scoped lang="scss">
    @import '@/theme/public.scss';
    @import '@/theme/animations.scss';
    @import './article-sort.scss';
</style>